<template>
	<view class="font con">
		<view style="display: flex;flex:1;align-items: center;" class="heigthSame"
			@click="go2page('/pages/store/selectorByCity')"
		>
			<uni-icons color="orange" type="location"></uni-icons> <text>{{cur_store.name}}</text>
		</view>
		<view style="flex:2">
			<input type="text" v-model="amount" class="heigthSame uni-border uni-input" placeholder="请输入金额(元)">
		</view>
		<view style="flex:1">
			<span class="uni-border btn-white payBtn" @click="toggle('bottom')">立即支付</span>
		</view>
		
		<view>
			<uni-popup ref="popup" background-color="#fff" >
				<view class="popup-content"  style="padding:30rpx;" :class="{ 'popup-height': type === 'left' || type === 'right' }">
					<!-- <text class="text">支付金额{{amount}}元</text> -->
					<view class="text">请输入备注:</view>
					<view>
						<textarea class="remark" v-model="remark" ></textarea>
					</view> 
					<view>
						<button @click="payDo" type="primary">确认支付</button>
					</view>
				</view>
			</uni-popup>
		</view>

	</view>
</template>

<script>
	import { mapGetters } from 'vuex';
	export default{
		computed: {
			...mapGetters({
				location: 'user/location',
				cur_store: 'user/cur_store'
			})
		},
		data(){
			return{
				amount:'',
				remark:'',
				isPayIng:false
			}
		},
		methods:{
			toggle(type) {
				if(!this.amount)return false;
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},
			go2page(url){
				uni.navigateTo({
					url,
					success:(res)=>{
						let _event = res.eventChannel
						_event.on("changeStore",(data)=>{
							console.log("changeStore",data)
						})
					}
				})
			},
			payDo(){
				let _this=this 
				if(!_this.amount)return false;
				if(_this.isPayIng)return false;
				_this.isPayIng=true
				_this.$api.post("direct.order/createOneAndPay",{
					storeId:_this.cur_store.id,
					amount:_this.amount,
					remark:_this.remark
				}).then(res=>{
					uni.requestPayment({
						provider: 'wxpay',
						nonceStr: res.data.nonceStr, // 随机字符串
						package: res.data.package, // 固定值
						timeStamp: res.data.timeStamp, // 时间戳（单位：秒）
						signType: res.data.signType,
						paySign: res.data.paySign, // 签名，这里用的 MD5/RSA 签名
						success: res => {
							uni.showModal({
								title: '提示',
								content: '支付成功',
								showCancel: false,
								cancelText: '',
								confirmText: '确认'
							})
						},
						fail: (res) => {
							console.log("支付失败",res);	
							uni.showModal({
								title: '提示',
								content: '支付失败',
								showCancel: false,
								cancelText: '',
								confirmText: '确认'
							})
						},
						complete: () => {
							_this.amount=''
							_this.remark=''
							_this.$refs.popup.close()
							_this.isPayIng=false
						}
					});	
				}).finally(()=>{
					
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	$h:80rpx;
	.con{
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 5rpx;
	}
	.remark{
		display: block;width: 100%;border-radius: 10rpx;
		border: 1px solid gray;text-align: left;
		margin-bottom: 10rpx;
	}
	.uni-input,.payBtn{display: block;width: 90%;border-radius: 10rpx;
		height: $h !important;
		line-height: $h;
	}
	.uni-border {border: 2px solid darkslategray;}
	.font{
		font-weight: 400;
		font-size: 30rpx;
		color: #333333;
		text-align: center;
	}
	.heigthSame{height:75rpx;
		padding: 0 5rpx;
	}
</style>